<template>
    <div class="sync-mockups">

        <div class="sync-mockups-headimg">
            <SynchronizeMockupsPreview v-if="mockupMain" :mockup="mockupMain" size="preview" />
            <h3>Primary image</h3>
        </div>

        <div class="sync-mockups-other">
            <div class="sync-mockups-title">
                <strong>Other images</strong>
                <span style="flex:1"></span>
                <span>Images selected: {{mockups.length}}/{{shop.img_limit}} </span>

                <el-tooltip placement="top">
                    <div slot="content">You can sync up to {{shop.img_limit}} images to your {{shop.platform}} store,<br> including the primary image and size chart.</div>
                    <svg-icon name="notify" />
                </el-tooltip>

            </div>

            <div class="sync-mockups-list">
                <div class="sync-mockups-normal" v-for="(mockup,index) in mockupNormal" :key="[mockup.type, mockup.design_id , mockup.color_id , mockup.model_id].join('-')" @click="openDialog('preview',index+1)">
                    <SynchronizeMockupsPreview :mockup="mockup" />
                </div>
                <div class="sync-mockups-more" :count="mockupMore.length" v-if="mockupMore.length > 0" @click="openDialog('preview',mockupNormal.length + 1)">
                    <SynchronizeMockupsPreview v-for="mockup in mockupMore" :key="mockup.design_id + mockup.color_id + mockup.surface_name + mockup.url" :mockup="mockup" />
                    <span>More</span>
                </div>
            </div>

            <div class="sync-mockups-setting">
                <button type="primary" @click="openDialog('edit')">Edit</button>
                <span v-show="sizeMockups.length < clothes.length" @click="openDialog('size')">Add size table to {{shop.platform}} photos</span>
            </div>
        </div>

        <!-- 弹窗 -->
        <SynchronizeMockupsEditor v-model="editor" />

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeMockups",
    data () {
        return {
            editor: null,
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            mockups: "mockups",
            shop: "shop",
        }),
        sizeMockups () {
            return this.mockups.filter(m => m.type == 'size');
        },
        // 主图
        mockupMain () {
            return this.mockups.length > 0 ? this.mockups[0] : null;
        },

        // 从图
        mockupNormal () {
            const mockups = this.mockups || [];
            return mockups.slice(1, 10)
        },

        // 更多的图
        mockupMore () {
            return this.mockups.slice(10, 14);
        },
    },

    methods: {
        getMockupFormat (mockup) {
            const product = this.clothes.filter(i => i.design_id == mockup.design_id)[0]
            if (product) {
                const model = product.model_list.filter(i => i.surface_name == mockup.surface_name)[0]
                const color = product.color_list.filter(i => i.color_id == mockup.color_id)[0];
                return {
                    ...mockup,
                    key: [mockup.color_id, mockup.url].join('-'),
                    model: model,
                    color: color,
                }
            } else {
                return null;
            }
        },

        // 打开弹窗
        openDialog (type, index) {
            this.editor = {
                type: type,
                active: index,
                mockups: JSON.parse(JSON.stringify(this.mockups)),
            }
        },
    },
    created () {


    },
};
</script>
<style lang="scss" scoped>
.sync-mockups {
    position: relative;
    display: flex;
    margin: 48px auto 0;
    max-width: 1014px;
}

.sync-mockups-other {
    margin-left: 72px;
    flex: 1;
}

.sync-mockups-headimg {
    width: 320px;
    .sync-mockups-preview {
        width: 320px;
        border: none;
    }
    h3 {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        text-align: center;
    }
}

.sync-mockups-title {
    display: flex;
    align-items: center;
    padding-top: 26px;
    font-family: Roboto-Medium, Roboto;
    line-height: 18px;
    justify-content: space-between;
    strong {
        font-size: 16px;
        color: #000000;
        font-weight: 500;
    }
    span {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
    }

    svg {
        width: 14px;
        height: 14px;
        background-color: #ababab;
        fill: #fff;
        border-radius: 14px;
        cursor: pointer;
        margin-left: 6px;
    }
}

.sync-mockups-list {
    margin: 14px -8px 0;
    display: flex;
    flex-wrap: wrap;

    & > .sync-mockups-normal,
    & > .sync-mockups-size {
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px solid #ebebeb;
        cursor: pointer;
        width: calc(20% - 16px);
        margin: 8px;
        overflow: hidden;

        &:hover {
            box-shadow: 0 0 1px 1px #f6b2cd;
            border-color: #f6b2cd;
        }
    }

    & > .sync-mockups-size {
        position: relative;
        &::before {
            content: '';
            display: block;
            padding-bottom: 100%;
        }

        & > img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    .sync-mockups-more {
        position: relative;
        width: calc(20% - 16px);
        margin: 8px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        border: 1px solid #ebebeb;
        background: #ffffff;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease-in-out;
        }

        & > span {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 80px;
            height: 24px;
            margin-left: -40px;
            margin-top: -12px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 12px;
            line-height: 12px;
            text-align: center;
            font-size: 14px;
            line-height: 24px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #ffffff;
            z-index: 1;
            transition: all 0.2s ease-in-out;
        }
        .sync-mockups-preview {
            width: 50%;
            border: none;
        }

        & > .sync-mockups-size {
            width: 50%;
            margin: 0;
        }

        &:hover {
            &:after {
                background-color: rgba(0, 0, 0, 0.12);
            }
            & > span {
                background: rgba(0, 0, 0, 0.7);
            }
        }

        &[count='1'] {
            .sync-mockups-preview {
                width: 100%;
            }
            &::after {
                display: none;
            }
            & > span {
                display: none;
            }

            &:hover {
                box-shadow: 0 0 1px 1px #f6b2cd;
                border-color: #f6b2cd;
            }
        }
    }
}

.sync-mockups-setting {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    button {
        width: 160px;
        height: 36px;
    }
    span {
        line-height: 36px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #555555;
        text-decoration: underline;
        cursor: pointer;

        &:hover {
            color: #ea4c89;
        }
    }
}
</style>
